<d-layout [dGutter]="[12, 12]" [style.margin-top]="'6px'">
  <d-row [dGutter]="[12, 12]" class="drawer-header">
    <d-col class="modal-header" [dSpan]="22">{{ stepTitle }}</d-col>
    <d-col [dSpan]="2" [style.text-align]="'right'" [style.cursor]="'pointer'">
      <span
        [style.margin-right]="'10px'"
        title="{{ 'datadev.fullScreen' | translate }}"
        (click)="toggleFullScreen()"
        class="icon"
        [ngClass]="{ 'icon-maxmize': !isFullScreen, 'icon-minimize': isFullScreen }"
      >
      </span>
      <span (click)="close($event)" title="{{ 'app.common.operate.close.label' | translate }}" class="icon icon-close"> </span>
    </d-col>
  </d-row>
  <div [ngSwitch]="stepType" class="drawer-body">
    <div *ngSwitchCase="'source-table'">
      <app-source-table-step
        [data]="{ onClose: close, item: cell, jobId: jobId }"
        (onSave)="saveStepInfo($event)"
        #step
      ></app-source-table-step>
    </div>
    <div *ngSwitchCase="'source-mock'">
      <app-source-mock-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-source-mock-step>
    </div>
    <div *ngSwitchCase="'source-mockStream'">
      <app-source-mock-stream-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-source-mock-stream-step>
    </div>
    <div *ngSwitchCase="'sink-table'">
      <app-sink-table-step
        [data]="{ onClose: close, item: cell, jobId: jobId }"
        (onSave)="saveStepInfo($event)"
        #step
      ></app-sink-table-step>
    </div>
    <div *ngSwitchCase="'sink-console'">
      <app-sink-console-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-sink-console-step>
    </div>
    <div *ngSwitchCase="'sink-kafka'">
      <app-sink-kafka-step
        [data]="{ onClose: close, item: cell, jobId: jobId }"
        (onSave)="saveStepInfo($event)"
        #step
      ></app-sink-kafka-step>
    </div>
    <div *ngSwitchCase="'source-kafka'">
      <app-source-kafka-step
        [data]="{ onClose: close, item: cell, jobId: jobId }"
        (onSave)="saveStepInfo($event)"
        #step
      ></app-source-kafka-step>
    </div>
    <div *ngSwitchCase="'sink-doris'">
      <app-sink-doris-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-sink-doris-step>
    </div>
    <div *ngSwitchCase="'sink-clickhouse'">
      <app-sink-clickhouse-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-sink-clickhouse-step>
    </div>
    <div *ngSwitchCase="'sink-elasticsearch'">
      <app-sink-elasticsearch-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-sink-elasticsearch-step>
    </div>
    <div *ngSwitchCase="'source-druid'">
      <app-source-druid-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-source-druid-step>
    </div>
    <div *ngSwitchCase="'sink-druid'">
      <app-sink-druid-step [data]="{ onClose: close, item: cell, jobId: jobId }" (onSave)="saveStepInfo($event)" #step>
      </app-sink-druid-step>
    </div>
  </div>
  <d-row [dGutter]="[12, 12]" class="drawer-footer">
    <d-button bsStyle="primary" (btnClick)="submitForm()">{{ 'app.common.operate.confirm.label' | translate }}</d-button>
    <d-button bsStyle="common" (btnClick)="close($event)">{{ 'app.common.operate.cancel.label' | translate }}</d-button>
  </d-row>
</d-layout>
